//创建构造函数
function Fdj(ele){
    //把大盒子中需要操作的元素获取，并赋值给实例属性
    this.box1=ele.querySelector('.box1')
    this.mark=ele.querySelector('.mark')
    this.box2=ele.querySelector('.box2')
    this.img2=this.box2.querySelector("img")
    //调用入口函数
    this.init()
}
//在原型空间中创建入口函数
Fdj.prototype.init=function(){
    //显示和隐藏
    this.showHide()
    //移动
    this.move()
}
//创建函数，让蒙版层和右边盒子显示和隐藏
Fdj.prototype.showHide=function(){
    //给左边大盒子绑定鼠标移入移出事件
    this.box1.onmouseover=()=>{
        //显示
        this.mark.style.display='block'
        this.box2.style.display='block'
    }
    //隐藏
    this.box1.onmouseout=()=>{
        this.mark.style.display='none'
        this.box2.style.display='none'
    }
}
Fdj.prototype.move=function(){
    //给左边大盒子对象绑定鼠标移动事件
    this.box1.onmousemove=(e)=>{
        var e = e || window.event
        //获取移动距离
        var left1=e.pageX-this.box1.offsetLeft-parseInt(this.mark.offsetWidth/2)-50
        var top1=e.pageY-this.box1.offsetTop-parseInt(this.mark.offsetHeight/2)-110
        //设置边界条件
        var maxX=this.box1.offsetWidth-this.mark.offsetWidth
        var maxY=this.box1.offsetHeight-this.mark.offsetHeight
        //右边图片的移动距离
        var imgX,imgY
        //判断边界条件
        if(left1<0){
            this.mark.style.left="0px"
            imgX=0
        }else if(left1>maxX){
            this.mark.style.left=maxX+'px'
            imgX=maxX
        }else{
            this.mark.style.left=left1+'px'
            imgX=left1
        }

        //垂直方向
        if(top1<0){
            this.mark.style.top="0px"
            imgY=0
        }else if(top1>maxY){
            this.mark.style.top=maxY+'px'
            imgY=maxY
        }else{
            this.mark.style.top=top1+'px'
            imgY=top1
        }
        //计算移动比例
        var x1=(this.img2.offsetWidth-this.box2.offsetWidth)/(this.box1.offsetWidth-this.mark.offsetWidth)
        var y1=(this.img2.offsetHeight-this.box2.offsetHeight)/(this.box1.offsetHeight-this.mark.offsetHeight)
        //让右边图片进行移动
        this.img2.style.left=-x1*imgX+'px'
        this.img2.style.top=-y1*imgY+'px'
    }
}